<template>
	<view>
		<view class="shell">
			<u-navbar title="消息通知" :title-size="35" :title-bold="true" :immersive="true" :background="background"
				:is-back="false" :border-bottom="false"></u-navbar>
			<view class="header">
				<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/messagebanner.png" style="width: 100%;height: 389rpx;">
				</image>
				<view class="inform">
					<view class="inform-lf">
						<view class="lf-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/inform.png"
								style="width: 100%;height: 100%;"></image>
						</view>
					</view>
					<view class="inform-rg">
						<view class="title">
							消息通知
						</view>
						<view class="content">
							关注公众账号，消息提醒更及时~
						</view>
					</view>
				</view>
			</view>
			<view class="recommend" v-for="item in messageList" @click="messageDetail(item)">
				<view class="recommend-lf">
					<view class="recommend-lf-img">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/xiaoxi.png" style="width: 100%;height: 100%;">
						</image>
					</view>

				</view>
				<view class="recommend-cen">
					<view class="cen-title">
						{{item.f_title}}
					</view>
					<view class="cen-content">
						{{item.f_content}}
					</view>
				</view>
				<view class="recommend-rg">
					<view class="time">
						{{item.created_at}}
					</view>
					<!-- <view class="pop">
						<view class="pop-p">5</view>
					</view> -->
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					// {
					// 	iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/saoma_grey.png",
					// 	selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/saoma.png",
					// 	text: '扫码',
					// 	customIcon: false,
					// 	pagePath: '/pages/Ewm/Ewm',
					// },
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage.png",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				messageList:{}


			};
		},
		created() {
			this.MessageData()
		},
		methods:{
			messageDetail(item){
				console.log(item)
				uni.navigateTo({
					url:'/pagesB/content/content?item='+JSON.stringify(item)
				})
			},
			MessageData(){				this.$Api.getMessageList({					page: 1,					pageNum: 15				}).then(res => {					this.messageList = res.data.data.list					console.log(res.data.data.list,'列表')				})			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.shell {
		width: 100%;
		height: auto;

		.header {
			width: 100%;
			height: 389rpx;
			position: relative;

			.inform {
				width: 749rpx;
				height: 190rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(223, 223, 223, 0.3);
				border-radius: 36rpx 36rpx 0px 0px;
				position: absolute;
				bottom: 10rpx;
				display: flex;

				.inform-lf {
					width: 280rpx;
					height: 187rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.lf-img {
						width: 87rpx;
						height: 87rpx;
					}

				}

				.inform-rg {
					width: 800rpx;
					height: 87rpx;

					.title {
						// width: 116rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						line-height: 72rpx;
						margin-top: 26rpx;
					}

					.content {
						// width: 376rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
			}
		}

		.recommend {
			width: 100%;
			height: 140rpx;
			display: flex;
			border-bottom: 1px solid #e1e1e1;

			.recommend-lf {
				width: 20%;
				height: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.recommend-lf-img {
					width: 88rpx;
					height: 88rpx;
				}
			}

			.recommend-cen {
				width: 60%;
				height: 140rpx;

				.cen-title {
					// width: 126rpx;
					height: 31rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					margin-top: 20rpx;
				}

				.cen-content {
					font-size: 28rpx;
					    font-family: PingFang SC;
					    font-weight: 500;
					    color: #8B8B8B;
					    margin-top: 30rpx;
					    white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
				}
			}

			.recommend-rg {
				width: 20%;
				height: 140rpx;

				.time {
					width: 85%;
					height: 23rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #8B8B8B;
					margin-top: 20rpx;
					text-align: right;

				}

				.pop {
					width: 32rpx;
					height: 32rpx;
					background: #F4333C;
					border: 2rpx solid #FFFFFF;
					box-shadow: 0px 0px 16rpx 0px rgba(244, 51, 60, 0.2);
					border-radius: 50%;
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 10px;

					.pop-p {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

				}
			}
		}


	}
</style>
